<script setup>
	import { onLoad, onPageScroll } from '@dcloudio/uni-app'
	import { ref, nextTick, getCurrentInstance } from 'vue'
	import { parseTime } from '@/utils/common'
	import { useUserStore } from '@/store/user'
	import { getDictType, getBanquet, getBanquetTraffic, agreeBanquet } from '@/api/report'
	const instance = getCurrentInstance()
	
	const user = useUserStore()
	const config = getApp().globalData.config
	const navCurrent = ref(0)
	const navLeft = ref(0)
	const navList = ref([{id: 0, label: '申报信息'}])
	let topList = []
	const whiteHeight = ref(0)
	const loading = ref(false)
	const form = ref({declare: {}})
	const auditColumns = [{label: '待审批', value: 0}, {label: '审批通过', value: 1}, {label: '审批驳回', value: 2}, {label: '已过期', value: 3}]
	const checkColumns = [{label: '待检查', value: 5}, {label: '已检查', value: 4}, {label: '已过期', value: 3}]
	const applyList = ref([])
	const fuelList = ref([])
	const waterList = ref([])
	const disinfectionList = ref([])
	const time = ref(0)
	const timeList = ref([])
	const agreePopup =ref(null)
	const list = ref([])
	const selectValue = ref('')
	const qrCodePopup = ref(null)
	const qrcodeEle = ref(null)
	const qrcodeOptions = {foregroundImageSrc: config.appInfo.logo}
	const qrcodeValue = ref('')
	
	function getType(id) {
		Promise.all([getDictType('apply_banquets_types'), getDictType('apply_fuel_types'), getDictType('apply_water_types'), 
			getDictType('apply_disinfection_types')]).then(arr => {
				applyList.value = arr[0].result || []
				fuelList.value = arr[1].result || []
				waterList.value = arr[2].result || []
				disinfectionList.value = arr[3].result || []
				getData(id)
			})
	}
	function getData(id) {
		loading.value = true
		getBanquet(id).then(res => {
			let data = res.result || {}
			form.value = data
			initNav()
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function initNav() {
		if(form.value.feast && form.value.feast.length) {
			timeList.value = form.value.feast.map(item => parseTime(item.date, '{y}-{m}-{d}'))
			navList.value.push({id: 1, label: '督导报告'})
		}
		if(form.value.refrigerate) {
			navList.value.push({id: 2, label: '冷藏保鲜记录'})
		}
		if(form.value.fuel) {
			navList.value.push({id: 3, label: '燃料安全'})
		}
		if(form.value.trace && form.value.trace.length) {
			navList.value.push({id: 4, label: '食材溯源'})
		}
		if(form.value.approve) {
			navList.value.push({id: 5, label: '审批信息'})
		}
		nextTick(() => {
			uni.createSelectorQuery().in(instance.proxy).selectViewport().boundingClientRect((vm) => {
				for(let i = 0; i < navList.value.length; i++) {
					let item = navList.value[i]
					uni.createSelectorQuery().in(instance.proxy).select("#section_" + item.id).boundingClientRect((ele) => {
						let top = ele.top - uni.upx2px(96)
						topList.push({id: item.id, top})
						if(i === navList.value.length - 1) {
							let extraHeight = form.value.declare.type === 0? uni.upx2px(234) : uni.upx2px(118)
							whiteHeight.value = vm.height - extraHeight - ele.height
						}
					}).exec()
				}
			}).exec()
		})
	}
	function handleNav(index) {
		if(index != navCurrent.value) {
			navCurrent.value = index
			navLeft.value = index > 0 ? (index - 1) * 128 : 0
			loading.value = true
			uni.pageScrollTo({
				scrollTop: topList[index].top,
				complete: () => {
					loading.value = false
				}
			})
		}
	}
	function getAuditStatus(value) {
		let cur = auditColumns.find(item => item.value === value)
		if(cur) return cur.label
		else return '--'
	}
	function getCheckStatus(value) {
		let cur = checkColumns.find(item => item.value === value)
		if(cur) return cur.label
		else return '--'
	}
	function getApplyType(value) {
		let cur = applyList.value.find(item => item.value === value)
		if(cur) return cur.dictLabel
		else return '--'
	}
	function getFuelType(value) {
		let cur = fuelList.value.find(item => item.value === value)
		if(cur) return cur.dictLabel
		else return '--'
	}
	function getWaterType(value) {
		let cur = waterList.value.find(item => item.value === value)
		if(cur) return cur.dictLabel
		else return '--'
	}
	function getDisinfectionType(value) {
		
		let cur = disinfectionList.value.find(item => item.value === value)
		if(cur) return cur.dictLabel
		else return '--'
	}
	function timeChange(e) {
		let index = e.detail.value
		if(index === undefined) return
		time.value = index
	}
	function viewImg(url) {
		let urls = [url]
		uni.previewImage({
			urls
		})
	}
	function viewImgList(arr = [], index = 0) {
		let urls = arr.map(item => item.furl)
		uni.previewImage({
			current: index,
			urls
		})
	}
	function viewTableImg(item) {
		let urls = []
		if(item.handFront) {
			urls.push(item.handFront.furl)
		}
		if(item.handOpposite) {
			urls.push(item.handOpposite.furl)
		}
		if(item.fullBody) {
			urls.push(item.fullBody.furl)
		}
		if(urls.length){
			uni.previewImage({
				urls: urls
			})
		} else{
			uni.showToast({
				icon: 'none',
				title: '没有图片'
			})
		}
	}
	function getFoodType(value) {
		switch(value) {
			case 1: return '早餐';
			case 2: return '午餐';
			case 3: return '晚餐';
			default: return '--'
		}
	}
	function reject() {
		uni.showModal({
			title: '宴席报备驳回',
			editable: true,
			placeholderText: '请输入驳回原因',
			success: res => {
				if(res.confirm) {
					loading.value = true
					let params = uni.$uv.deepClone(form.value.declare)
					params.approve = 2
					if(res.content) params.remark = res.content
					agreeBanquet(params).then(res => {
						uni.showToast({
							icon: 'success',
							title: res.msg
						})
						loading.value = false
						setTimeout(()=>{ uni.navigateBack() },1000)	
					}).catch(() => loading.value = false)
				}
			}
		})
	}
	function agree() {
		loading.value = true
		getBanquetTraffic().then(res => {
			loading.value = false
			let data = res.result || []
			list.value = data
		}).catch(() => loading.value = false)
		agreePopup.value.open()
	}
	function closeAgree() {
		agreePopup.value.close()
	}
	function confirmAgree() {
		let curAssistant = list.value.find(item => item.userId === selectValue.value)
		if(!curAssistant) return
		loading.value = true
		let params = uni.$uv.deepClone(form.value.declare)
		params.approve = 1
		params.assistantId = curAssistant.userId
		params.assistantName = curAssistant.nickname
		agreeBanquet(params).then(res => {
			uni.showToast({
				icon: 'success',
				title: res.msg
			})
			loading.value = false
			setTimeout(()=>{ uni.navigateBack() },1000)	
		}).catch(() => loading.value = false)
	}
	function qrCode(id) {
		if(id) qrcodeValue.value = config.baseUrl + '/' + id
		qrCodePopup.value.open()
	}
	function confirmeQrCode() {
		qrcodeEle.value.save({
			success: () => {
				uni.showToast({icon: 'success', title: '保存成功'})
				closeQrCode()
			},
			fail: () => {
				uni.showToast({icon: 'none', title: '保存失败'})
			}
		})
	}
	function closeQrCode() {
		qrCodePopup.value.close()
		setTimeout(() => {
			qrcodeValue.value = ''
		}, 500)
	}
	
	onLoad((option) => {
		if(option.id){
			getType(option.id)
		}
	})
	onPageScroll((e) => {
		if(loading.value) return
		let curSection = topList.findIndex(item => e.scrollTop < item.top)
		let index = curSection !== -1 ? curSection : topList.length
		index = index > 0? index - 1 : index
		navCurrent.value = index
		navLeft.value = index > 0 ? (index - 1) * 128 : 0
	})
</script>

<template>
	<view :class="['app-container', user.theme, form.declare.type === 0? 'show-bottom' : '']">
		<view class="app-head" v-if="form.declare">
			<view class="head-title">
				<view class="head-code">宴席编号：{{form.declare.code  || '--'}}</view>
				<view :class="['head-status', 'status-' + form.declare.type]">
					<view class="status-circle"></view>
					<text>{{getAuditStatus(form.declare.type)}}</text>
				</view>
			</view>
			<view class="head-row">
				<text class="label">协管员</text>
				<text class="value">{{form.declare.assistantName || '--'}}</text>
			</view>
			<view class="head-row">
				<text class="label">检查状态</text>
				<text class="value">{{getCheckStatus(form.declare.checkType)}}</text>
			</view>
		</view>
		<uv-sticky>
			<scroll-view scroll-x="true" class="nav-top" :scroll-left="navLeft" scroll-with-animation='true'>
				<view :class="['head-item', navCurrent == index? 'active' : '']" v-for="(nav, index) in navList" :key="index" @click="handleNav(index)">
					{{nav.label}}
				</view>
			</scroll-view>
		</uv-sticky>
		<view class="app-content">
			<view class="section-box" id="section_0">
				<view class="section-title">申报信息</view>
				<view class="section-content">
					<view class="title-head">举办人信息</view>
					<view class="info-box">
						<view class="row">
							<view class="label">姓名</view>
							<view class="value">{{form.declare.sponsorName || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">手机号</view>
							<view class="value">{{form.declare.sponsorPhone || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">村社</view>
							<view class="value">{{form.declare.fullAddress || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">详细地址</view>
							<view class="value">{{form.declare.address || '--'}}</view>
						</view>
					</view>
				</view>
				<view class="section-content">
					<view class="title-head">办宴信息</view>
					<view class="info-box">
						<view class="row">
							<view class="label">办宴时间</view>
							<view class="value">{{parseTime(form.declare.startTime, '{y}-{m}-{d}')}}</view>
						</view>
						<view class="row">
							<view class="label">办宴天数</view>
							<view class="value">{{form.declare.days || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">办宴类型</view>
							<view class="value">{{getApplyType(form.declare.applyType)}}</view>
						</view>
						<view class="row">
							<view class="label">聚餐人数</view>
							<view class="value">{{form.declare.peopleNumber || '--'}}</view>
						</view>
					</view>
				</view>
				<view class="section-content">
					<view class="title-head">乡厨信息</view>
					<view class="info-box">
						<view class="row">
							<view class="label">承办人</view>
							<view class="value">{{form.declare.undertakerName || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">承办人电话</view>
							<view class="value">{{form.declare.undertakerPhone || '--'}}</view>
						</view>
						<view class="row-image">
							<view class="image-box">
								<image class="img" :src="form.declare.healthCertificate && form.declare.healthCertificate.furl" mode="aspectFill" 
									@click="viewImg(form.declare.healthCertificate && form.declare.healthCertificate.furl)"></image>
								<text class="tip">健康证</text>
							</view>
							<view class="image-box">
								<image class="img" :src="form.declare.trainingCertificate && form.declare.trainingCertificate.furl" mode="aspectFill" 
									@click="viewImg(form.declare.trainingCertificate && form.declare.trainingCertificate.furl)"></image>
								<text class="tip">培训合格证</text>
							</view>
							<view class="image-box">
								<image class="img" :src="form.declare.stallholderCertificate && form.declare.stallholderCertificate.furl" mode="aspectFill" 
									@click="viewImg(form.declare.stallholderCertificate && form.declare.stallholderCertificate.furl)"></image>
								<text class="tip">摊贩证</text>
							</view>
						</view>
						<view v-for="item in form.declare.applyCommis" :key="item.id">
							<view class="row">
								<view class="label">帮厨</view>
								<view class="value">{{item.name || '--'}}</view>
							</view>
							<view class="row">
								<view class="label">电话</view>
								<view class="value">{{item.phone || '--'}}</view>
							</view>
							<view class="row-image">
								<view class="image-box">
									<image class="img" :src="item.health && item.health.furl" mode="aspectFill" @click="viewImg(item.health.furl)"></image>
									<text class="tip">健康证</text>
								</view>
								<view class="image-box">
									<image class="img" :src="item.health && item.qualified.furl" mode="aspectFill" @click="viewImg(item.qualified.furl)"></image>
									<text class="tip">培训合格证</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="section-content">
					<view class="title-head">加工场地卫生情况</view>
					<view class="info-box">
						<view class="row-space">
							<view class="label">燃料</view>
							<view class="value">{{getFuelType(form.declare.fuel)}}</view>
						</view>
						<view class="row-space">
							<view class="label">水源</view>
							<view class="value">{{getWaterType(form.declare.waterType)}}</view>
						</view>
						<view class="row-space">
							<view class="label">餐具消毒方式</view>
							<view class="value">{{getDisinfectionType(form.declare.disinfectionMethod)}}</view>
						</view>
						<view class="row-space">
							<view class="label">留样设施</view>
							<view class="value">{{form.declare.sample || '--'}}</view>
						</view>
						<view class="row-space">
							<view class="label">有毒有害物品</view>
							<view class="value">{{form.declare.ifInjurant || '--'}}</view>
						</view>
						<view class="row-space">
							<view class="label">餐具保洁柜数量</view>
							<view class="value">{{form.declare.cabinetNumber || '--'}}</view>
						</view>
						<view class="row-space">
							<view class="label">冰箱数量</view>
							<view class="value">{{form.declare.fridgeNumber || '--'}}</view>
						</view>
						<view class="row-space">
							<view class="label">垃圾桶数量</view>
							<view class="value">{{form.declare.trashNumber || '--'}}</view>
						</view>
						<view class="row-space">
							<view class="label">防鼠、防蝇、防尘设施数量</view>
							<view class="value">{{form.declare.facilityNumber || '--'}}</view>
						</view>
						<view class="row-space">
							<view class="label">专业洗菜、肉、鱼盆数量</view>
							<view class="value">{{form.declare.basinNumber || '--'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section-box" id="section_1" v-if="form.feast && form.feast.length">
				<view class="section-title">
					<text>督导报告</text>
					<picker @change="timeChange" :value="time" :range="timeList">
						<view class="time-select">
							<text>{{timeList[time]}}</text>
							<uv-icon name="arrow-down" color="#313233" size="30" bold />
						</view>
					</picker>
				</view>
				<view class="section-content" v-if="form.feast[time].applySuperviseVO">
					<view class="title-head">报告信息</view>
					<view class="info-box">
						<view class="row">
							<view class="label">协管员</view>
							<view class="value">{{form.declare.assistantName || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">是否报告</view>
							<view class="value">{{form.feast[time].applySuperviseVO.ifReport === '1'? '是' : '否'}}</view>
						</view>
					</view>
				</view>
				<view class="section-content" v-if="form.feast[time].applySuperviseVO">
					<view class="title-head">宴席情况</view>
					<view class="info-box">
						<view class="row">
							<view class="label large">就餐人数</view>
							<view class="value">{{form.feast[time].applySuperviseVO.personNum || '--'}}人</view>
						</view>
						<view class="row">
							<view class="label large">从业人员数量</view>
							<view class="value">{{form.feast[time].applySuperviseVO.staffNum || '--'}}</view>
						</view>
						<view class="row">
							<view class="label large">健康证数量</view>
							<view class="value">{{form.feast[time].applySuperviseVO.certificateNum || '--'}}</view>
						</view>
						<view class="row">
							<view class="label large">消毒方式</view>
							<view class="value">{{getDisinfectionType(form.feast[time].applySuperviseVO.disinfectionType)}}</view>
						</view>
						<view class="row">
							<view class="label large">消毒时间</view>
							<view class="value">{{form.feast[time].applySuperviseVO.disinfectionDate || '--'}}</view>
						</view>
						<view class="row-image-small">
							<view class="image-small">
								<image class="img-item" 
									:src="form.feast[time].applySuperviseVO.superviseCook[0] && form.feast[time].applySuperviseVO.superviseCook[0].furl" 												mode="aspectFill"
									@click="viewImg(form.feast[time].applySuperviseVO.superviseCook[0] && form.feast[time].applySuperviseVO.superviseCook[0].furl)">
								</image>
								<text class="image-title">烹饪区域检查</text>
							</view>
							<view class="image-small">
								<image class="img-item" :src="form.feast[time].applySuperviseVO.coldDish[0] && form.feast[time].applySuperviseVO.coldDish[0].furl" 										mode="aspectFill"
									@click="viewImg(form.feast[time].applySuperviseVO.coldDish[0] && form.feast[time].applySuperviseVO.coldDish[0].furl)"></image>
								<text class="image-title">凉菜区域检查</text>
							</view>
							<view class="image-small">
								<image class="img-item" :src="form.feast[time].applySuperviseVO.frozen[0] && form.feast[time].applySuperviseVO.frozen[0].furl" 											mode="aspectFill"
									@click="viewImg(form.feast[time].applySuperviseVO.frozen[0] && form.feast[time].applySuperviseVO.frozen[0].furl)"></image>
								<text class="image-title">冷藏区域检查</text>
							</view>
							<view class="image-small">
								<image class="img-item" :src="form.feast[time].applySuperviseVO.fuel[0] && form.feast[time].applySuperviseVO.fuel[0].furl" 												mode="aspectFill"
									@click="viewImg(form.feast[time].applySuperviseVO.fuel[0] && form.feast[time].applySuperviseVO.fuel[0].furl)"></image>
								<text class="image-title">燃料区域检查</text>
							</view>
							<view class="image-small">
								<image class="img-item" :src="form.feast[time].applySuperviseVO.sample[0] && form.feast[time].applySuperviseVO.sample[0].furl" 											mode="aspectFill"
									@click="viewImg(form.feast[time].applySuperviseVO.sample[0] && form.feast[time].applySuperviseVO.sample[0].furl)"></image>
								<text class="image-title">留样区域检查</text>
							</view>
							<view class="image-small">
								<image class="img-item" :src="form.feast[time].applySuperviseVO.other[0] && form.feast[time].applySuperviseVO.other[0].furl" 												mode="aspectFill"
									@click="viewImg(form.feast[time].applySuperviseVO.other && form.feast[time].applySuperviseVO.other[0].furl)"></image>
								<text class="image-title">其它区域检查</text>
							</view>
							<view class="image-small">
								<image class="img-item" :src="form.feast[time].applySuperviseVO.selfie[0] && form.feast[time].applySuperviseVO.selfie[0].furl" 												mode="aspectFill"
									@click="viewImg(form.feast[time].applySuperviseVO.selfie && form.feast[time].applySuperviseVO.selfie[0].furl)"></image>
								<text class="image-title">自拍</text>
							</view>
						</view>
					</view>
				</view>
				<view class="section-content" v-if="form.feast[time].applySuperviseVO">
					<view class="title-head">检查报告</view>
					<view class="info-box">
						<view class="row-text">
							<view class="label">举办场地是否变更：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifAddr === '1'? '是' : '否'}}</text>
							</view>
							<view class="extra-info" v-if="form.feast[time].applySuperviseVO.ifAddr === '1'">
								<view class="row-extra">
									<text class="label">举办地址：</text>
									<text class="value">{{form.feast[time].applySuperviseVO.addr || '--'}}</text>
								</view>
								<view class="row-extra">
									<text class="label">变更地址：</text>
									<text class="value">{{form.feast[time].applySuperviseVO.addrInfo || '--'}}</text>
								</view>
							</view> 
						</view>
						<view class="row-text">
							<view class="label">加工场所内外是否清洁卫生，原理污染源（禽畜圈养舍开放式测试、暴露垃圾等）：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifHygiene === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">加工就餐场所是否存在有毒有害物资（ 如甲醇、农药、 鼠药等）：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifVenomous === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">是否专人管理：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifManager === '1'? '是' : '否'}}</text>
							</view>
							<view class="extra-info" v-if="form.feast[time].applySuperviseVO.ifManager === '1'">
								<view class="row-extra">
									<text class="label">专管员：</text>
									<text class="value">
										{{form.feast[time].applySuperviseVO.managerName || '--'}} · {{form.feast[time].applySuperviseVO.managerPhone || '--'}}
									</text>
								</view>
							</view> 
						</view>
						<view class="row-text">
							<view class="label">厨师是否有健康合格证：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifCertificate === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">是否发现有从业人员存在咳嗽、腹泻、指甲过长、穿戴不整洁的情况：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifStaff === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">餐饮具消毒是否符合要求：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifDisinfection === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">是否有过期或霉变食品原料：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifMildew === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">是否使用野生菌、发青土豆、新鲜生黄花、四季豆等高危食材：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifFungus === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">是否使用病死或使用死因不明的禽畜肉：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifDisease === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">烧熟煮透，煮熟的食品是否与生食品分开存放：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifPartition === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">海鲜加工清洗是否使用专用场所工具：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifSeafood === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">剩菜是否存放到冰箱或冰柜中；不能及时加工处理的肉类、水产品及其他半成品是否存放在冰箱或冰柜中：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifLeftovers === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">是否具备留样冷藏设备，留样菜品每样不少于125克，48小时以上保存：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifSample === '1'? '是' : '否'}}</text>
							</view>
						</view>
						<view class="row-text">
							<view class="label">是否需要整改：</view>
							<view class="value">
								<view class="value-circle"><view class="circle-content"></view></view>
								<text>{{form.feast[time].applySuperviseVO.ifRectify === '1'? '是' : '否'}}</text>
							</view>
							<view class="extra-image" v-if="form.feast[time].applySuperviseVO.ifRectify === '1'">
								<view class="extra-image-text">
									<text>整改时间：</text>
									<text class="text-value">{{parseTime(form.feast[time].applySuperviseVO.startTime, '{y}-{m}-{d}')}}</text>
								</view>
								<view class="row-extra-image">
									<view class="image-box">
										<image class="img" :src="form.feast[time].applySuperviseVO.held && form.feast[time].applySuperviseVO.held.fuel" mode="aspectFill"
											@click="viewImg(form.feast[time].applySuperviseVO.held && form.feast[time].applySuperviseVO.held.fuel)"></image>
										<text class="tip">举办者签字</text>
									</view>
									<view class="image-box">
										<image class="img" :src="form.feast[time].applySuperviseVO.undertaker && form.feast[time].applySuperviseVO.undertaker.fuel" 
											mode="aspectFill"
											@click="viewImg(form.feast[time].applySuperviseVO.undertaker && form.feast[time].applySuperviseVO.undertaker.fuel)"></image>
										<text class="tip">承办者签字</text>
									</view>
									<view class="image-box">
										<image class="img" :src="form.feast[time].applySuperviseVO.management && form.feast[time].applySuperviseVO.management.fuel"
											mode="aspectFill"
											@click="viewImg(form.feast[time].applySuperviseVO.management && form.feast[time].applySuperviseVO.management.fuel)"></image>
										<text class="tip">协管员签字</text>
									</view>
								</view>
							</view> 
						</view>
					</view>
				</view>
				<view class="section-content" v-if="form.feast[time].applyMorningCheckVOList && form.feast[time].applyMorningCheckVOList.length">
					<view class="title-head">人员晨检记录</view>
					<scroll-view scroll-x="true" class="scroll-table">
						<view class="table-box">
							<view class="table-tr head">
								<view class="table-td"><view class="cell-small"></view></view>
								<view class="table-td"><view class="cell-time">晨检时间</view></view>
								<view class="table-td"><view class="cell">乡厨类型</view></view>
								<view class="table-td"><view class="cell">姓名</view></view>
								<view class="table-td"><view class="cell-large">手机号</view></view>
								<view class="table-td"><view class="cell">体温℃</view></view>
								<view class="table-td"><view class="cell-large">手部是否佩戴戒指</view></view>
								<view class="table-td"><view class="cell-large">手部是否存在创口贴</view></view>
								<view class="table-td"><view class="cell-large">手部是否涂指甲油</view></view>
								<view class="table-td"><view class="cell-large">手部是否存在伤口</view></view>
								<view class="table-td"><view class="cell-large">是否存在腹泻</view></view>
								<view class="table-td"><view class="cell-large">是否存在喉咙发炎</view></view>
								<view class="table-td"><view class="cell">晨检照片</view></view>
								<view class="table-td"><view class="cell-time">录入时间</view></view>
							</view>
							<view class="table-tr" v-for="(item, index) in form.feast[time].applyMorningCheckVOList" :key="item.id">
								<view class="table-td"><view class="cell-small">{{index + 1}}</view></view>
								<view class="table-td"><view class="cell-time">{{item.checkTime || '--'}}</view></view>
								<view class="table-td"><view class="cell">{{item.chefType === 1? '乡厨' : '帮厨'}}</view></view>
								<view class="table-td"><view class="cell">{{item.chefName || '--'}}</view></view>
								<view class="table-td"><view class="cell-large">{{item.chefPhone || '--'}}</view></view>
								<view class="table-td"><view class="cell">{{item.bodyTemperature || '--'}}</view></view>
								<view class="table-td"><view class="cell-large">{{item.ring? '是' : '否'}}</view></view>
								<view class="table-td"><view class="cell-large">{{item.plaster? '是' : '否'}}</view></view>
								<view class="table-td"><view class="cell-large">{{item.varnish? '是' : '否'}}</view></view>
								<view class="table-td"><view class="cell-large">{{item.wound? '是' : '否'}}</view></view>
								<view class="table-td"><view class="cell-large">{{item.diarrhea? '是' : '否'}}</view></view>
								<view class="table-td"><view class="cell-large">{{item.soreThroat? '是' : '否'}}</view></view>
								<view class="table-td"><view class="cell primary" @click="viewTableImg(item)">查看</view></view>
								<view class="table-td"><view class="cell-time">{{item.createTime || '--'}}</view></view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="section-content" v-if="form.feast[time].foodSampleResponseDTO && form.feast[time].foodSampleResponseDTO.length">
					<view class="title-head">菜品留样记录</view>
					<scroll-view scroll-x="true" class="scroll-table">
						<view class="table-box">
							<view class="table-tr head">
								<view class="table-td"><view class="cell-small"></view></view>
								<view class="table-td"><view class="cell-time">留样时间</view></view>
								<view class="table-td"><view class="cell">餐次</view></view>
								<view class="table-td"><view class="cell">菜品名称</view></view>
								<view class="table-td"><view class="cell">留样照片</view></view>
								<view class="table-td"><view class="cell-time">录入时间</view></view>
							</view>
							<view class="table-tr" v-for="(item, index) in form.feast[time].foodSampleResponseDTO" :key="item.id">
								<view class="table-td"><view class="cell-small">{{index + 1}}</view></view>
								<view class="table-td"><view class="cell-time">{{item.reservedTime || '--'}}</view></view>
								<view class="table-td"><view class="cell">{{getFoodType(item.type)}}</view></view>
								<view class="table-td"><view class="cell">{{item.foodName || '--'}}</view></view>
								<view class="table-td"><view class="cell primary" @click="viewImg(item.image && item.image.furl)">查看</view></view>
								<view class="table-td"><view class="cell-time">{{item.createTime || '--'}}</view></view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="section-box" id="section_2" v-if="form.refrigerate">
				<view class="section-content">
					<view class="title-head">冷藏保鲜记录</view>
					<view class="info-box">
						<view class="row">
							<view class="label">录入时间</view>
							<view class="value">{{form.refrigerate.createTime || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">冷藏图片</view>
							<view class="value primary" @click="viewImgList(form.refrigerate.image)">查看图片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section-box" id="section_3" v-if="form.fuel">
				<view class="section-content">
					<view class="title-head">燃料安全</view>
					<view class="info-box">
						<view class="row">
							<view class="label">录入时间</view>
							<view class="value">{{form.fuel.createTime || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">燃料类型</view>
							<view class="value">{{getFuelType(form.fuel.fuelTypeId)}}</view>
						</view>
						<view class="row">
							<view class="label">燃料图片</view>
							<view class="value primary" @click="viewImgList(form.fuel.fuelPhoto)">查看图片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section-box" id="section_4" v-if="form.trace && form.trace.length">
				<view class="section-content">
					<view class="title-head">食材溯源</view>
					<view class="traceability-box" v-for="(item, index) in form.trace" :key="item.shopId">
						<view class="traceability-head">
							<view class="head-name">{{item.shopName || '--' }}</view>
							<view class="head-info">
								<view>负责人：{{item.sellerName || '--'}} | {{item.sellerPhone || '--' }}</view>
								<view>采购日期：{{parseTime(item.purchasingTime, '{y}-{m}-{d}')}}</view>
							</view>
						</view>
						<view class="traceability-list">
							<view class="traceability-item" v-for="(goods, index) in item.applyGoods" :key="goods.logicId">
								<uv-image :src="goods.image && goods.image.furl" width="120" height="120" radius="12"></uv-image>
								<view class="item-content">{{goods.goodsName || '--'}}</view>
								<view class="item-right" @click="qrCode(goods.logicId)">溯源码</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section-box" id="section_5" v-if="form.approve">
				<view class="section-content">
					<view class="title-head">审批信息</view>
					<view class="info-box">
						<view class="row">
							<view class="label">审批人</view>
							<view class="value">{{form.approve.createBy || '--'}}</view>
						</view>
						<view class="row">
							<view class="label">审批时间</view>
							<view class="value">{{form.approve.approveTime || '--'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: whiteHeight + 'px'}"></view>
		</view>
		<view class="app-bottom" v-if="form.declare.type === 0">
			<uv-button color="#F34D4D" shape="circle" text="驳 回" :custom-style="{width: '328rpx', height: '84rpx'}" @click="reject" :disabled="loading"></uv-button>
			<uv-button type="primary" shape="circle" text="同 意" :custom-style="{width: '328rpx', height: '84rpx'}" @click="agree" :disabled="loading"></uv-button>
		</view>
		
		<uv-popup ref="agreePopup" closeable mode="center" bgColor="none">
			<view class="popup-box">
				<view class="popup-title">选择协管员</view>
				<scroll-view scroll-y="true" class="popup-content" >
					<uv-radio-group v-model="selectValue" placement="column" iconPlacement="right" :size="user.theme? 40 : 30" :iconSize="user.theme? 30 : 22"
						:labelSize="user.theme? 32 : 28" shape="square" v-if="list.length">
						<view :class="['traffic-box', selectValue === item.userId ? 'active' : '']" v-for="(item, index) in list" :key="item.userId">
							<uv-radio :name="item.userId" :label="item.nickname"></uv-radio>
						</view>
					</uv-radio-group>
					<empty text="没有找到协管员" v-else></empty>
				</scroll-view>
				<view class="popup-bottom">
					<uv-button color="#F5F5F5" shape="circle" text="取消" :custom-style="{width: '295rpx'}" @click="closeAgree" :disabled="loading" 
						:custom-text-style="{color: '#313233'}"></uv-button>
					<uv-button type="primary" shape="circle" text="确定" :custom-style="{width: '295rpx'}" @click="confirmAgree" :disabled="loading || !selectValue">
						</uv-button>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="qrCodePopup" closeable mode="center" bgColor="none">
			<view class="popup-box">
				<view class="popup-title">溯源码</view>
				<view class="popup-content">
					<view class="qrcode-box">
						<uv-qrcode ref="qrcodeEle" :value="qrcodeValue" :options="qrcodeOptions" v-if="qrcodeValue"></uv-qrcode>
						<empty text="商品编码不存在" :srcSize="300" v-else></empty>
					</view>
				</view>
				<view class="popup-bottom">
					<uv-button color="#F5F5F5" shape="circle" text="取消" :custom-style="{width: '295rpx'}" @click="closeQrCode"
						:custom-text-style="{color: '#313233'}"></uv-button>
					<uv-button type="primary" shape="circle" text="确定" :custom-style="{width: '295rpx'}" @click="confirmeQrCode">
						</uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		&.show-bottom {
			padding-bottom: 116rpx;
		}
		.app-head{
			padding: 0 32rpx 24rpx;
			background-color: #FFFFFF;
			.head-title{
				padding: 24rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 10rpx;
				border-bottom: 2rpx solid #F4F4F4;
				.head-code{
					font-weight: 600;
				}
				.head-status{
					display: flex;
					align-items: center;
					gap: 8rpx;
					.status-circle{
						width: 16rpx;
						height: 16rpx;
						border-radius: 16rpx;
						border: 4rpx solid #ADB0BD;
						background-color: #313233;
					}
					&.status-0{
						color: #EF7824;
						.status-circle{
							border-color: #FCE4D3;
							background-color: #EF7824;
						}
					}
					&.status-1{
						color: #2BD982;
						.status-circle{
							border-color: #D5F7E6;
							background-color: #2BD982;
						}
					}
					&.status-2{
						color: #F34D4D;
						.status-circle{
							border-color: #FDDBDB;
							background-color: #F34D4D;
						}
					}
				}
			}
			.head-row{
				padding-top: 24rpx;
				display: flex;
				gap: 8rpx;
				.label{
					width: 160rpx;
					color: #626466;
				}
				.value{
					flex: 1;
				}
			}
		}
		.nav-top{
			width: 100%;
			height: 96rpx;
			white-space: nowrap;
			padding-left: 32rpx;
			background-color: #F7F8FA;
			.head-item{
				display: inline-block;
				height: 96rpx;
				line-height: 96rpx;
				margin-right: 48rpx;
				color: #626466;
				&.active{
					font-size: var(--theme-lg);
					font-weight: 600;
					color: $uv-primary;
				}
			}
		}
		.app-content{
			.section-box{
				margin-bottom: 24rpx;
				background-color: #FFFFFF;
				.section-title{
					padding: 18rpx 24rpx;
					color: #ACAFB2;
					font-weight: 600;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.time-select{
						display: flex;
						align-items: center;
						gap: 10rpx;
						color: #313233;
					}
				}
				.section-content{
					padding: 16rpx 0;
				}
			}
			.title-head{
				margin: 20rpx 16rpx;
				border-left: 8rpx solid $uv-primary;
				padding-left: 8rpx;
				font-size: var(--theme-lg);
				font-weight: 600;
			}
			.info-box{
				padding: 0 32rpx;
				.row{
					padding: 18rpx 0;
					display: flex;
					align-items: center;
					gap: 8rpx;
					.label{
						width: 160rpx;
						color: #626466;
						&.large{
							width: 216rpx;
						}
					}
					.value{
						flex: 1;
					}
				}
				.row-space{
					padding: 18rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 8rpx;
					.label{
						flex-shrink: 0;
						color: #626466;
					}
					.value{
						flex: 1;
						text-align: right;
					}
				}
				.row-image{
					padding: 24rpx 0;
					display: flex;
					flex-wrap: wrap;
					gap: 24rpx 32rpx;
					.image-box{
						width: calc(50% - 16rpx);
						height: 232rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 8rpx;
						.img{
							width: 100%;
							height: 192rpx;
							background-color: #F7F8FA;
							border-radius: 8rpx;
						}
						.tip{
							font-size: var(--theme-sm);
							line-height: var(--theme-sm-line);
							color: #727687;
						}
					}
				}
				.row-image + .row{
					border-top: 2rpx solid #F0F1F3;
				}
				.row-image-small{
					padding: 24rpx 0;
					display: flex;
					flex-wrap: wrap;
					gap: 24rpx 24rpx;
					.image-small{
						width: calc(33% - 16rpx);
						height: 200rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 8rpx;
						.img-item{
							width: 100%;
							height: 192rpx;
							border-radius: 8rpx;
							background-color: #F7F8FA;
						}
						.image-title{
							font-size: var(--theme-sm);
							line-height: var(--theme-sm-line);
							color: #727687;
						}
					}
				}
				.row-text{
					padding: 18rpx 0;
					.label{
						
					}
					.value{
						margin-top: 18rpx;
						display: flex;
						align-items: center;
						gap: 16rpx;
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
						.value-circle{
							width: 28rpx;
							height: 28rpx;
							border-radius: 14rpx;
							border: 2rpx solid #A7BED2;
							padding: 5rpx;
							.circle-content{
								width: 16rpx;
								height: 16rpx;
								border-radius: 9rpx;
								background-color: $uv-primary;
							}
						}
					}
					.extra-info{
						margin-top: 18rpx;
						padding: 18rpx;
						background-color: #F5F6F8;
						border-radius: 8rpx;
						display: flex;
						flex-direction: column;
						gap: 18rpx;
						.row-extra{
							display: flex;
							align-items: flex-start;
							gap: 16rpx;
							.label{
								flex-shrink: 0;
							}
							.value{
								flex: 1;
								color: $uv-primary;
							}
						}
					}
					.extra-image{
						margin-top: 18rpx;
						padding: 18rpx;
						background-color: #F5F6F8;
						border-radius: 4rpx;
						.extra-image-text{
							display: flex;
							align-items: center;
							gap: 16rpx;
							.text-value{
								color: $uv-primary;
							}
						}
						.row-extra-image{
							margin-top: 18rpx;
							display: flex;
							flex-wrap: wrap;
							gap: 24rpx 24rpx;
							.image-box{
								width: calc(33% - 16rpx);
								display: flex;
								flex-direction: column;
								gap: 16rpx;
								.img{
									width: 100%;
									height: 176rpx;
									background-color: #FFFFFF;
									border-radius: 8rpx;
								}
								.tip{
									text-align: center;
								}
							}
						}
					}
				}
				.row-text + .row-text{
					border-top: 2rpx solid #E1E5E8;
				}
			}
			.scroll-table{
				margin-left: 32rpx;
				width: calc(100% - 64rpx);
				white-space: nowrap;
			}
			.table-box{
				display: table;
				border-top: 2rpx solid #E5E6EB;
				border-left: 2rpx solid #E5E6EB;
				border-bottom: 2rpx solid #E5E6EB;
				.table-tr{
					display: table-row;
					height: 88rpx;
					.table-td{
						display: table-cell;
						vertical-align: middle;
						padding: 0 16rpx;
						min-height: 88rpx;
						line-height: 32rpx;
						border-right: 2rpx solid #E5E6EB;
						.cell-small{
							width: 88rpx;
							text-align: center;
						}
						.cell{
							width: 160rpx;
						}
						.cell-large{
							width: 340rpx;
						}
						.cell-time{
							width: 160rpx;
							word-wrap: break-word;
							white-space: normal;
						}
					}
					&.head{
						.table-td{
							background-color: rgba(151,160,194,0.1);
						}
					}
				}
				.table-tr + .table-tr{
					border-top: 2rpx solid #E5E6EB;
				}
			}
			.primary{
				color: $uv-primary;
			}
			.traceability-box{
				padding: 0 32rpx;
				.traceability-head{
					background: #EBF0F5;
					padding: 32rpx 18rpx;
					border-radius: 16rpx 16rpx 0 0;
					.head-name{
						font-size: var(--theme-lg);
						line-height: var(--theme-lg-line);
						font-weight: 600;
					}
					.head-info{
						margin-top: 18rpx;
						display: flex;
						justify-content: space-between;
						align-content: center;
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
						color: #626466;
					}
				}
				.traceability-list{
					padding: 0 18rpx;
					.traceability-item{
						padding: 18rpx 0;
						display: flex;
						align-items: center;
						gap: 16rpx;
						.item-content{
							flex: 1;
						}
						.item-right{
							color: #3E85D6;
						}
					}
					.traceability-item + .traceability-item{
						border-top: 2rpx solid #F0F1F3;
					}
				}
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 100;
			height: 116rpx;
			padding: 16rpx 32rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.04);
			display: flex;
			gap: 30rpx;
			::v-deep .uv-button__text{
				font-size: var(--theme-lg) !important;
			}
		}
		.popup-box{
			width: 686rpx;
			background: linear-gradient( 180deg, #E7EEF9 0%, #FFFFFF 24%);
			border-radius: 32rpx;
			padding: 32rpx;
			.popup-title{
				padding-bottom: 32rpx;
				text-align: center;
				font-weight: 600;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
			}
			.popup-content{
				width: 100%;
				height: 500rpx;
				background-color: #FFFFFF;
				.traffic-box{
					padding: 24rpx;
					font-weight: 600;
					&.active{
						background-color: rgba(62,133,214,0.1);
					}
				}
				.qrcode-box{
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.popup-bottom{
				padding-top: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 32rpx;
			}
		}
	}
</style>